{% extends "base.html" %}
{% load staticfiles %}
{% block content %}
<style>
.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 999px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    background: red;
    cursor: inherit;
    display: block;
}
input[readonly] {
    background-color: white !important;
    cursor: text !important;
}
</style>
<script type='text/javascript'>
$(document)
    .on('change', '.btn-file :file', function() {
        var input = $(this),
        numFiles = input.get(0).files ? input.get(0).files.length : 1,
        label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
        input.trigger('fileselect', [numFiles, label]);
});

$(document).ready( function() {
    $('.btn-file :file').on('fileselect', function(event, numFiles, label) {

        var input = $(this).parents('.input-group').find(':text'),
            log = numFiles > 1 ? numFiles + ' files selected' : label;

        if( input.length ) {
            input.val(log);
        } else {
            if( log ) alert(log);
        }

    });
});
</script>
<div class="row">
    <div class="col-md-6 col-md-offset-3 center">
        <p style="margin-bottom: 10px;"><img src="{% static "graphic/cuckoo.png" %}" /></p>

        <form role="form" action="" method="post" enctype="multipart/form-data">{% csrf_token %}
            <div class="tabbable">
                <div class="tab-content">
                    <div class="tab-pane fade in active" id="file">
                        
                        <label style="display: flex; color: #337ab7;">Choose analysis to import (Only .zip)</label>
                        <input name="category" type="text" class="form-control hidden" value="file">
                        <div class="input-group col-md-6">
                            <span class="input-group-btn">
                                <input type="text" class="form-control" readonly>
                                <span class="btn btn-primary btn-file">
                                    Select <input type="file" name="sample" multiple="multiple">
                                </span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div style="margin-top: 20px;"><button type="submit" class="btn btn-primary btn-lg">Import</button></div>
        </form>
    </div>
</div>
{% endblock %}
